<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>fontext v1.0.19 Cheatsheet</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>

#topbar { background: #f2f2f2; height: 45px; border-bottom: 1px solid #ddd; }
#topbar h1 { margin: 0; color: #999; }

#sizes { margin: 8px 0 0 30px; }
#meta small { color: #999; line-height: 50px; }

#main { padding-top: 80px; }

#pagehead { margin: 20px 0; }

.icon-list {
    list-style-type: none;
    padding-left: 0px;
    overflow: hidden;
}

.icon-list li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  background-color: #fff;
  width: 128px; height: 128px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px; 
}

.icon-list-item a {
  display: block;
  text-align: center;
  color: #333;
  outline: none;
  position: relative;
  overflow: hidden;
}
.icon-list a:hover, .icon-list a.zeroclipboard-is-hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.icon-list li:hover { background: #333; }
.icon-list li:hover > a > .fa-ext { color: white; }
.size-1x .icon-list-item > a > .fa-ext { font-size: 1em; }
.size-2x .icon-list-item > a > .fa-ext { font-size: 2em; }
.size-3x .icon-list-item > a > .fa-ext { font-size: 3em; }
.size-4x .icon-list-item > a > .fa-ext { font-size: 4em; }

.icon-list-item > a > b { display: block; color: #999; font-size: 11px; margin-top: 5px; text-overflow: ellipse; }

#sidebar a { display: block; padding: 4px 20px; font-size: 13px; font-weight: 500; color: #999; }
#affix-nav li.active > a { color: #08f; }
    </style>
	<link rel="stylesheet" href="fontext.css" type="text/css"/>
</head>
<body data-spy="scroll">
    <header class="navbar navbar-fixed-top bs-docs-nav" id="topbar" role="banner">
      <div class="container">
        <h1 class="pull-left">fontext</h1>
        <div id="sizes" class="pull-left">
            <span class="btn-group">
                <a class="btn btn-default" data-size="1x">1X</a>
                <a class="btn btn-default" data-size="2x">2X</a>
                <a class="btn btn-default" data-size="3x">3X</a>
                <a class="btn btn-success" data-size="4x">4X</a>
            </span>
        </div>
        <div id="meta" class="pull-right">
            <small>version: 1.0.19 | 41 icons</small>
        </div>
      </div>
    </header>

    <div id="main" class="container" >
        <a id="top"></a>
        <div class="row" data-target="#affix-nav" >
            <div class="col-md-9">
                <div id="content" class="size-4x">
                    <section>
    <h2 id="basic">Basic Shapes <small>9 icons</small></h2>
    <ul class="icon-list">
        <li class="icon-list-item"><a><i class="fa fa-ext fa-onedev-logo"></i> <b>onedev-logo</b> <b>F100</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-markdown"></i> <b>markdown</b> <b>F110</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-checklist"></i> <b>checklist</b> <b>F111</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-milestone"></i> <b>milestone</b> <b>F112</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder"></i> <b>folder</b> <b>F113</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-o"></i> <b>folder-o</b> <b>F114</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-symbol-link"></i> <b>file-symbol-link</b> <b>F115</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-gatekeeper"></i> <b>gatekeeper</b> <b>F116</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-book"></i> <b>book</b> <b>F117</b></a></li>

    </ul>
</section>

<section>
    <h2 id="repo">Repository <small>32 icons</small></h2>
    <ul class="icon-list">
        <li class="icon-list-item"><a><i class="fa fa-ext fa-repo"></i> <b>repo</b> <b>F200</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-add"></i> <b>repo-add</b> <b>F201</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-remove"></i> <b>repo-remove</b> <b>F202</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-fork"></i> <b>repo-fork</b> <b>F203</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-clone"></i> <b>repo-clone</b> <b>F204</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-lock"></i> <b>repo-lock</b> <b>F205</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-unlock"></i> <b>repo-unlock</b> <b>F206</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-pull"></i> <b>repo-pull</b> <b>F207</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-push"></i> <b>repo-push</b> <b>F208</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-repo-sync"></i> <b>repo-sync</b> <b>F209</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-diff-added"></i> <b>diff-added</b> <b>F210</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-diff-removed"></i> <b>diff-removed</b> <b>F211</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-diff-modified"></i> <b>diff-modified</b> <b>F212</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-diff-renamed"></i> <b>diff-renamed</b> <b>F213</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-diff-ignored"></i> <b>diff-ignored</b> <b>F214</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-diff"></i> <b>file-diff</b> <b>F215</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-added"></i> <b>file-added</b> <b>F216</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-removed"></i> <b>file-removed</b> <b>F217</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-modified"></i> <b>file-modified</b> <b>F218</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-file-renamed"></i> <b>file-renamed</b> <b>F219</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-added-o"></i> <b>folder-added-o</b> <b>F21A</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-removed-o"></i> <b>folder-removed-o</b> <b>F21B</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-modified-o"></i> <b>folder-modified-o</b> <b>F21C</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-renamed-o"></i> <b>folder-renamed-o</b> <b>F21D</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-commit"></i> <b>commit</b> <b>F220</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-branch"></i> <b>branch</b> <b>F221</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-branch-merge"></i> <b>branch-merge</b> <b>F222</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-branch-pattern"></i> <b>branch-pattern</b> <b>F223</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-branch-compare"></i> <b>branch-compare</b> <b>F224</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-branch-lock"></i> <b>branch-lock</b> <b>F225</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-symbol-link-o"></i> <b>folder-symbol-link-o</b> <b>F227</b></a></li>

<li class="icon-list-item"><a><i class="fa fa-ext fa-folder-submodule-o"></i> <b>folder-submodule-o</b> <b>F228</b></a></li>

    </ul>
</section>

                </div>
            </div>
            <div id="sidebar" class="col-md-3">
                <div id="affix-nav" class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" data-offset-top="60" role="complementary">
                    <ul class="nav bs-docs-sidenav">
                        <li class="active"><a href="#basic" >Basic Shapes</a></li>
<li><a href="#repo" >Repository</a></li>
                    </ul>

                    <a class="back-to-top" href="#top">
                      Back to top
                    </a>
                </div>

            </div>
        </div>
    </div>

	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>	
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#sizes .btn').click(function() {
                var $self = $(this);
                $('.btn-success').removeClass('btn-success').addClass('btn-default')
                $self.removeClass('btn-default').addClass('btn-success')
                $('#content').removeClass().addClass('size-' + $self.data('size'))
            })
        })
    </script>
</body>
</html>
